import React from 'react'
import ReactDOM from 'react-dom'


// import Movie from  '@/10.class关键字创建React组件'

class Movie extends React.Component {

    //由于movie组件，继承了React.Component这个父类，所以自定义构造器中，必须使用super()
    constructor(){
        super()

        //只有调用了super以后，才能使用this关键字
        this.state = { //相当于vue中data(){return {}}
            msg:"我是通过 class 创建的组件"
        }
    }



    //渲染当前组件所对应的虚拟DOM元素
    render(){
        //在class关键字创建的组件中，如果想使用外界传递过来的props参数，不需要直接接收，直接通过this.props.***访问即可
        console.log(this.props)
        //无论是 class 还是普通的function创建的组件，他们的props都是只读的
        //this.props.name="laisi" //报错： Cannot assign to read only property 'name' of object '

        //this.state上的数据都是可读可写的
        this.state.msg = '我在此处修改了msg属性的值'    
        return  <div>这是class创建的组件
                    <br/>name:{this.props.name}
                    <br/>age:{this.props.age}
                    <h3>{this.state.msg}</h3>
                </div>
    }
}

const user = {
    name:"ax",
    age:18,
    gender:"男"
}

ReactDOM.render(
    <div>
        <Movie name={user.name} age={user.age}></Movie>     
    </div>,document.getElementById('app'))